<template>
	<view class="footer">
		<!-- F1:底部的导航菜单 -->
		<view class="f1">
			<navigator url="../../pages/userCenter/userCenter" open-type="switchTab">登录</navigator>
			<text>|</text>
			<navigator url="../../pages/userCenter/userCenter" open-type="switchTab">注册</navigator>
			<text>|</text>
			<navigator url="../../pages/chatroom/chatroom">在线客服</navigator>
			<text>|</text>
			<text @click="go">返回顶部</text>
		</view>
		<!-- F2:四宫格菜单 -->
		<view class="f2">
			<view class="col">
				<image class="icon" style="width: 100rpx;" src="../../static/img/icon1.png" mode="widthFix"></image>
				<text>品质保障</text>
			</view>
			<view class="col">
				<image class="icon" style="width: 100rpx;" src="../../static/img/icon2.png" mode="widthFix"></image>
				<text>私人订制</text>
			</view>
			<view class="col">
				<image class="icon" style="width: 100rpx;" src="../../static/img/icon3.png" mode="widthFix"></image>
				<text>学员特供</text>
			</view>
			<view class="col">
				<image class="icon" style="width: 100rpx;" src="../../static/img/icon4.png" mode="widthFix"></image>
				<text>个人专属</text>
			</view>
		</view>
		<!-- F3:版权声明 -->
		<view class="f3">
			<text>版权声明 © 达内科技 2022</text>
		</view>

	</view>
</template>

<script>
	export default {
		name: "xzFooter",
		data() {
			return {

			};
		},
		methods: {
			go() {
				//返回页面顶部
				uni.pageScrollTo({
					scrollTop:0
				})
			}
		},
	}
</script>

<style lang="scss">
	.footer {
		margin: $uni-spacing-col-base 0;
		border-top: $uni-border-width $uni-border-style $uni-border-color;
		border-bottom: $uni-border-width $uni-border-style $uni-border-color;
		box-shadow: 0 0 $uni-shadow-radius-sm $uni-border-color;
	}

	.f1 {
		padding: $uni-spacing-col-base;
		//弹性容器的主轴方向:横向
		//子元素在主轴方向上:空白均匀分布
		flex-direction: row;
		justify-content: space-evenly;
	}

	.f2 {
		//主轴方向:横向
		flex-direction: row;
		border-top: $uni-border-width $uni-border-style $uni-border-color;
		border-bottom: $uni-border-width $uni-border-style $uni-border-color;
		padding: $uni-spacing-col-base 0;

		.col {
			//尺寸增长的权重:1
			flex: 1;
			//当前元素也是弹性容器,主轴为纵向,子元素在交叉轴上水平居中
			align-items: center;

			.icon {
				width: 40%;
			}
		}
	}

	.f3 {
		//在交叉轴上,弹性容器内的子元素居中对齐
		align-items: center;
		padding: $uni-spacing-col-base 0;
	}
</style>
